import {h} from './vdom';
// h创建虚拟dom
const root = document.getElementById('root')

const oldVnode = h('div', {id: 'container'}, 
  h('span', {style: {color: 'red'}}, 'hello'),
  'world'
)
console.log(oldVnode)

// mount函数  
// 挂载 mount函数  传入 vnode  container 
// 调用 createDOMElementFromVnode 返回新el元素
// 挂载到 container 上面


// createDOMElementFromVnode 
// 根据Vnode创建元素 createDOMElementFromVnode 传入 vnode 
// 如果不是单单的文字  创建一个标签类实于div  然后把返回的el元素 挂载到vnode的真实dom上面
// 单单是文字的话  就直接创建文字节点
// 调用 updateProperties 传入vnode 更新节点属性
// 判断儿子是不是数组  是的话  就递归调用 createDOMElementFromVnode 挂载到他爹身上
// 返回真实的dom元素

// updateProperties  传入vnode oldprops老属性
// 先处理样式对象 
// 如果老的有 新的没有 需要删除 
// 属性也是一样
// 最后添加新属性  新的样式



// DOMDIFF 如果老节点和新的节点类型不一样的话 直接把老的替换成新的
// 接下来 处理 新旧节点的替换问题
// 新建 patch 方法 传入老的节点oldVnode 新的newVnode
// 1. 新的节点 type 不一样 直接重建   oldVnode.domElement xx.replaceChild(createDOMElementFromVnode(newVnode), oldVnode.Element);
// 如果新节点的vnode.text有值的话 说明是文本节点 就替换下老的文本值 
// 2. 如果类型一样 要继续往下比较  ————1.比较属性  2.比较他的儿子们
//    把老的真实dom赋值给新的vnode  
//    更新属性  updateProperties（newVnode  oldVnode.props）
//    拿出新老的儿子出来比较  oldVnode.children
//    如果他们儿子的长度都大于0  
//         调用 updateChildren 传入老的children  新的children
//    如果新的 没有儿子     oldVnode 真实节点.innerHTML = '
//    如果新的有 老的没有    循环下  调用createDOMElementFromVnode  挂载到节点上


// createKeyToIndexMap 传入oldchildren  （用来找有没有这个元素）
// 循环children 已key为key i为值 
// 返回一个map 对象


// updateChildren parentElement  oldchildren  newChildren 
// 两个队列
// 新建索引  老的节点 index vnode  老的节点结束索引 index vnode
// 新建索引  新的节点 index vnode  新的节点结束索引 index vnode
// let oldKeyToIndexMap = createKeyToIndexMap(oldChildren)
// 循环 oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex 如果有一个结束 就停止循环
//    如果 oldStartVnode没有的话   oldStartVnode = oldChildren[++oldStartIndex]
//    如果 oldEndVnode没有的话   oldEndVnode = oldChildren[--oldEndIndex]
//    老的开始节点和新的开始节点比较isSameNode  
//        如果是一样的 那就递归调用patch  然后 oldStartIndex++  newStartIndex++ 继续
//    老的结束节点跟新的结束节点比较
//        如果是一样的话   那就递归调用patch  然后 oldEndIndex--  newEndIndex-- 
//    老的结束跟新的开始比较
//        如果是一样的话   那就递归调用patch 父的EL.insertBefore(老的结束el, 老的开始el)  然后 --oldStartIndex  ++newStartIndex
//    老的开始跟新的结束比较
//        如果是一样的话   那就递归调用patch  父的EL.insertBefore(老的开始el, 老的结束el)  然后 ++oldStartIndex  --newEndIndex
//    else
//        oldIndexBykey 用新的vnode的key去oldKeyToIndexMap找有没有这个节点 取出这个key
//            如果没有的话  那就  插入到 老的oldstartvnode的前面
//            如果有的话   
//                    那就拿到这个真实的元素    
//                    这边还要判断是不是类型也一样
//                        如果一样
//                             先更新patch(oldvnode, newvnode)
//                             oldChilren[oldIndexBy] = undefined
//                             插入到 老的oldstartvnode的前面
//                        如果不一样
//                             根据这个vnode创建出新的真实dom  然后插入到  老的oldstartvnode的前面
//        新的vnode向下一个
// 如果 newStartIndex <= newEndIndex  老的队列 处理完了  新的队列没有处理完  
//       --这边重点是通用的写法  beforeElement 等于 newChildren[newEndIndex] 结果为  null 或者 是最后一个
//     继续处理新队列  循环下插入 父元素
// 如果oldStrartIndex <= oldEndIndex
//     循环这个区间的删掉


// isSameNode 传入 old newVnode
// 如果说 两个虚拟DOM key一样  并且类型一样  说是一种节点 可以进行深度比较

// isVnode 传入vnode
// 如果 vnode._tyoe == VNODE_TYPE 说明是虚拟dom